{% extends "base.html" %}

{% block title %}播放视频 - {{ video.title }}{% endblock %}

{% block page_title %}播放视频{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title mb-3">{{ video.title }}</h4>
                <div class="ratio ratio-16x9 mb-3">
                    <video controls autoplay class="img-fluid rounded">
                        <source src="{{ video.local_path }}" type="video/mp4">
                        您的浏览器不支持HTML5视频。
                    </video>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center">
                        {% if video.avatar_url %}
                        <img src="{{ video.avatar_url }}" class="rounded-circle mr-2" alt="{{ video.author }}" style="width: 40px; height: 40px;">
                        {% endif %}
                        <div class="ms-2">
                            <h6 class="mb-0">{{ video.author }}</h6>
                            <small class="text-muted">发布于: {{ video.publish_time }}</small>
                        </div>
                    </div>
                    <div>
                        <span class="badge bg-primary me-2">
                            <i class="bi bi-eye">播放次数:</i> {{ video.play_count | int | format_number }}
                        </span>
                        <span class="badge bg-danger">
                            <i class="bi bi-heart">点赞次数:</i> {{ video.like_count | int | format_number }}
                        </span>
                    </div>
                </div>

                <div class="mt-3">
                    <a href="/hot-videos" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> 返回视频列表
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">视频信息</h5>
            </div>
            <div class="card-body">
                <dl class="row">
                    <dt class="col-sm-4">平台:</dt>
                    <dd class="col-sm-8">
                        {% if video.platform == 'douyin' %}
                        <span class="badge bg-danger">抖音</span>
                        {% elif video.platform == 'tiktok' %}
                        <span class="badge bg-dark">TikTok</span>
                        {% elif video.platform == 'instagram' %}
                        <span class="badge bg-warning text-dark">Instagram</span>
                        {% else %}
                        <span class="badge bg-secondary">{{ video.platform }}</span>
                        {% endif %}
                    </dd>

                    <dt class="col-sm-4">视频ID:</dt>
                    <dd class="col-sm-8">{{ video.video_id }}</dd>

                    <dt class="col-sm-4">作者:</dt>
                    <dd class="col-sm-8">{{ video.author }}</dd>

                    <dt class="col-sm-4">发布时间:</dt>
                    <dd class="col-sm-8">{{ video.publish_time }}</dd>

                    <dt class="col-sm-4">播放次数:</dt>
                    <dd class="col-sm-8">{{ video.play_count | int | format_number }}</dd>

                    <dt class="col-sm-4">点赞次数:</dt>
                    <dd class="col-sm-8">{{ video.like_count | int | format_number }}</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
{% endblock %}